<template>
  <div class="home">
    <div class="ds-flex">
      <div class="reco">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>专题推荐</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
          </div>
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="旅行家专栏" name="1">
              <el-carousel indicator-position="none" type="" height="160px" arrow="hover">
                <el-carousel-item v-for="(item,index) in img_url2" :key="index">
                  <el-image style="width: 190px;" :src="item.url" fit="contain"></el-image>
                  <div>{{item.name}}</div>
                </el-carousel-item>
              </el-carousel>

            </el-collapse-item>
            <!-- <el-collapse-item title="反馈 Feedback" name="2">
              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
              <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
            </el-collapse-item>
            <el-collapse-item title="效率 Efficiency" name="3">
              <div>简化流程：设计简洁直观的操作流程；</div>
              <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
              <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
            </el-collapse-item>
            <el-collapse-item title="可控 Controllability" name="4">
              <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
              <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
            </el-collapse-item> -->
          </el-collapse>
        </el-card>

      </div>
      <div class="news">
        <div class="news-nav jcsb items-center">
          <ul class="ds-flex">
            <li>热门游记</li>
            <!-- <li>最新发布</li> -->
          </ul>
          <el-button type="primary">写游记</el-button>
        </div>
        <div class="news-list">
          <el-card class="box-card margin-top-l">
            <div class="ds-flex" v-for="(item,index) in news_list" :key="index">
              <el-image :src="item.url" style="width: 220px;height: 150px;min-width: 220px; margin: 0.5rem;"></el-image>
              <div class="jccnsb" style="padding: 0.5rem;">
                <div style="color: #666666;">
                  <h3>{{item.title}}</h3>
                  <div class="size-m text-gray">{{item.syso}}</div>
                </div>
                <div class="jcsb items-center">
                  <div>
                    <span><i class="el-icon-map-location"></i>{{item.city}}</span>
                    <span class="margin-left-xl">作者：{{item.author}}</span>
                    <span class="margin-left-xl"><i class="el-icon-view"></i>{{item.pv}}/{{item.ul}}</span>
                  </div>
                  <span class="margin-left-xl ds-flex items-center size-xl text-blue"><i
                      class="el-icon-collection-tag size-xxxl"></i>{{item.co}}</span>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        img_url: [,
          "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/v2.jfif",
          "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/v3.jfif",
          "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/v4.jfif"
        ],
        img_url2: [{
            "name": "默默等待，鱼上桌，迅速夹一口塞在嘴里——我就像个戒烟多日的老烟枪终于抽上了烟，心里的空洞瞬间被填满了。",
            "url": "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/c1.jpeg",
          },
          {
            "name": "漫山岛在第二条路上，满眼都是天赋，却偏爱挥霍青山绿水，用自己的方式过小日子，即便强行拖它起来，也得不到结果。",
            "url": "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/c2.jpeg",
          },
          {
            "name": "我最终从胡日尔的美术馆里带走了一幅画，画的是冬日的萨满岩，是日落时分",
            "url": "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/c3.jpeg",
          }

        ],
        news_list: [{
            title: "",
            url: "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/c1.jpeg",
            city: "白羊座",
            author: "秋名山ae886",
            pv: 831,
            ul: 102,
            co: 21,
            syso: "默默等待，鱼上桌，迅速夹一口塞在嘴里——我就像个戒烟多日的老烟枪终于抽上了烟，心里的空洞瞬间被填满了。"
          },
          {
            title: "",
            url: "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/c2.jpeg",
            city: "西藏",
            author: "秋名山ae886",
            pv: 124,
            ul: 43,
            co: 27,
            syso: "漫山岛在第二条路上，满眼都是天赋，却偏爱挥霍青山绿水，用自己的方式过小日子，即便强行拖它起来，也得不到结果。"
          },
          {
            title: "",
            url: "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/c3.jpeg",
            city: "欧洲",
            author: "秋名山ae886",
            pv: 25,
            ul: 4,
            co: 11,
            syso: "我最终从胡日尔的美术馆里带走了一幅画，画的是冬日的萨满岩，是日落时分。那夕阳下的奔跑，是我无悔的青春"
          }
        ],
        activeName: "1",
        radio: 3
      }
    },
    mounted() {
      this.me()
    },
    methods: {
      // 获取个人信息
      me() {
        this.axios_ex('/api/user/user_info', {}, "GET")
      },
      // 退出
      logout() {
        this.axios_ex('/api/user/logout', {}, "DELETE")
      },
      //登录
      login() {
        this.axios_ex('/api/user/login', {
          user_name: "plyue",
          password: "123456"
        }, "POST")
      },
      regist() {
        this.axios_ex('/api/user/regist', {
          user_name: "plyue",
          password: "123456",
          phone: "15711277736",
          email: "15711277736@163.com"
        }, "POST")
      },
      // axios 请求
      axios_ex(url, up_data, method, sd) {
        //alert('进入登录请求')
        let that = this;
        let request_url = this.getAjaxUrl() + url;
        // let request_url = 'https://v2ce.sankuanedu.com' + url;
        let ajax_dict = {}
        if (method == 'GET') {
          console.log(up_data)
          ajax_dict = {
            method: method,
            url: request_url,
            params: up_data,
            withCredentials: true,
          }
        } else {
          ajax_dict = {
            method: method,
            url: request_url,
            data: up_data,
            withCredentials: true,
          }
        }
        axios(ajax_dict)
          .then(function(res) {})
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
            if (url == '/login') {
              alert('用户名密码错误');
            }
          });
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
